<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>类型表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../styles/common.css" />

</head>

<body>
<!--<h1>管理员账号管理</h1>-->
<div class="app" id="app">
    <!--    <el-container style="height: 750px; ">-->
    <!--    有一条细细的白线-->

    <!--1.主要内容-->
    <el-container style="height: 750px; border: 1px solid #eee">
        <el-container>
            <div style="width: 100%;position: relative">
                <div style=";margin-bottom: 25px;">
                    <el-input
                            placeholder="请输入分类名称"
                            clearable
                            style="width: 20%; "
                            prefix-icon="el-icon-search"
                            v-model="DishFlavorQuery.flavorType"
                    >
                    </el-input>
                    <el-button @click="getAll()" class="dalfBut">查询</el-button>
                    <el-button type="warning" style="float: right" @click="addAndUpdate(null,1)">新增分类</el-button>
                </div>
                <el-table   size="medium" current-row-key="id"  :data="dataList" stripe highlight-current-row>

                    <el-table-column type="index" align="center" label="序号"></el-table-column>

                    <el-table-column prop="flavorType" label="菜品类型" align="center"></el-table-column>
                    <el-table-column prop="describes" label="菜品描述" align="center"></el-table-column>

                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="addAndUpdate(scope.row,2)">编辑</el-button>
                            <el-button type="danger"  size="mini" @click="forbiddenDishFlavor(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--分页组件-->
                <el-pagination
                        class="pagination"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>

        </el-container>
    </el-container>

    <!--2.新增修改 分类弹框-->
    <el-dialog :title="title" style="height: 750px"  :visible.sync="DishFlavorAddShow">
        <el-form :model="formData_DishFlavor" :rules="rules" ref="formData_DishFlavor" label-width="100px" class="demo-formData_DishFlavor">
            <el-form-item  label="分类名称：" prop="flavorType">
                <el-input v-model="formData_DishFlavor.flavorType"></el-input>
            </el-form-item>

            <el-form-item  label="分类描述：" prop="describes">
                <el-input v-model="formData_DishFlavor.describes"></el-input>
            </el-form-item>



            <el-form-item>
                <el-button type="primary" @click="submitForm">{{sureButton}}</el-button>
                <el-button @click="resetForm('formData_DishFlavor')">全部重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>
<script src="../../../js/request.js"></script>


<script>


    new Vue({
        el: '#app',
        data:{
//1.主页面内容
            //显示数据
            dataList:[],
            tableData:[],

            //分页插件
            pagination: {//分页相关模型数据 1
                currentPage: 1,//当前页码1
                pageSize:5,//每页显示的记录数1
                total:0,//总记录数1
            },

            //管理员搜索内容1
            DishFlavorQuery:{
                flavorType:""
            },

//2.弹框内容
            DishFlavorAddShow: false,
            title:"",   //弹框标题
            sureButton:"",   //弹框确定按钮 文字

            //弹框表单
            formData_DishFlavor: {
                flavorType:"",
                describes:"",
            },
            //弹框表单（input）校验
            rules: {
                flavorType: [
                    { required: true, message: '请输入username', trigger: 'blur' },
                    { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                ],
                describes: [
                    { required: true, message: '请输入name', trigger: 'blur' },
                    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                ],
            }

        },
        created() {
            this.getAll();
        },

        methods: {

            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            //1. 新增/修改表单 弹框
            addAndUpdate(row,title){
                if (title==1){      //1:"新增分类" ;2:"修改分类信息"
                    this.title="新增分类"
                    this.sureButton="立即新增"

                }else if (title==2){
                    this.title="修改分类信息"
                    this.sureButton="立即修改"
                    console.log("测试1："+this.formData_DishFlavor)

                    axios.get("/dishFlavors/"+row.id).then((res)=>{     //修改数据回显
                        if(res.data.data!=null){
                            console.log("res.data.data:")
                            console.log(res.data.data)
                            this.formData_DishFlavor=res.data.data;
                            this.DishFlavorAddShow=true;
                        }
                    })

                }
                this.formData_DishFlavor={}
                this.DishFlavorAddShow=true
            },

            //2.提交 新增/修改表单
            submitForm() {
                this.$refs.formData_DishFlavor.validate((valid)=>{
                    if (valid){
                        console.log("提交表单：")
                        console.log(this.formData_DishFlavor)
                        if (this.title=="新增分类"){                   //1:"新增分类" ;2:"修改员工信息"
                            axios.post("/dishFlavors/add",this.formData_DishFlavor).then((res)=>{
                                if(res.data.code){
                                    console.log(res.data.code);
                                    this.$message.success(res.data.msg);
                                }
                            }).finally(()=>{
                                this.getAll();
                                this.DishFlavorAddShow=false;
                            })
                        }else if (this.title=="修改分类信息"){
                            console.log("测试1.2："+this.formData_DishFlavor)

                            axios.put("/dishFlavors",this.formData_DishFlavor).then((res)=>{
                                console.log("测试1.3：")
                                console.log(this.formData_DishFlavor)

                                if (res.data.code){
                                    this.$message.success(res.data.msg);
                                }
                            }).finally(()=>{
                                this.getAll();
                                this.DishFlavorAddShow=false;
                            })
                        }
                    }else{
                    }
                })
            },

            //3.删除
            forbiddenDishFlavor(row) {
                this.$confirm("此操作删除当分类信息，是否继续?","提醒",{type: 'info'
                }).then(()=>{

                    axios.delete("/dishFlavors/"+row.id).then((res)=>{
                        this.$message.success(res.data.msg);
                    }).finally(()=>{
                        this.getAll()
                    })
                }).catch(()=>{
                    //取消删除
                    this.$message.info("取消删除操作")
                })

            },

            getAll(){
                parent ="?flavorType="+this.DishFlavorQuery.flavorType;
                axios.get("/dishFlavors/"+this.pagination.currentPage+"/"+this.pagination.pageSize+parent).then((res)=>{

                    this.dataList=res.data.data.records
                    this.pagination.total=res.data.data.total
                    this.DishFlavorQuery.flavorType=""
                })
            },
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage=currentPage;
                this.getAll();
            },

        }
    })
</script>
</body>
</html>
